<template>
	<view class="coupon-grant">
		<navigator class="back-arrow" open-type="navigateBack">
			<view class="arrow"></view>
		</navigator>
		<text class="title">发放优惠券</text>
	</view>

	<view class="coupon-form">
		<view class="form-item">优惠券名称：</view>
		<view class="form-item">
			<text class="label">优惠券类型：</text>
			<view class="coupon-type">
				<uni-data-checkbox v-model="couponType" :localdata="couponOptions"
					@change="handleTypeChange"></uni-data-checkbox>
			</view>
		</view>

		<view v-if="couponType === 'fullReduction'" class="form-item">
			<text class="label-type">满______元减______元</text>
		</view>
		<view v-if="couponType === 'discount'" class="form-item">
			<text class="label-type">打_____折</text>
		</view>

		<view class="form-item">
			<text class="label">发放开始时间：</text>
			<uni-datetime-picker v-model="startTime" type="date"></uni-datetime-picker>
		</view>

		<view class="form-item">
			<text class="label">发放结束时间：</text>
			<uni-datetime-picker v-model="endTime" type="date"></uni-datetime-picker>
		</view>

		<view class="form-item">
			<text class="label">投放数量：</text>
			<input class="input" type="number" v-model="quantity" placeholder="请输入投放数量" />
		</view>

		<view class="form-item">
			<text class="label">每人限领：</text>
			<input class="input" type="number" v-model="limitPerPerson" placeholder="请输入每人限领数量" />
		</view>

		<view class="form-item">
			<text class="label">使用有效期：</text>
			<uni-datetime-picker v-model="validity" type="date" placeholder="开始时间"></uni-datetime-picker>
			<uni-datetime-picker v-model="validity2" type="date" placeholder="结束时间"></uni-datetime-picker>
		</view>

	</view>


	<!-- 按钮区域 -->
	<view class="btn-section">
		<button form-type="submit" @click="enterNext">确认投放</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';







	const couponType = ref('fullReduction');
	const couponOptions = ref([{
			text: '满减券',
			value: 'fullReduction'
		},
		{
			text: '打折券',
			value: 'discount'
		}
	]);

	const startTime = ref('');
	const endTime = ref('');
	const quantity = ref('');
	const limitPerPerson = ref('');
	const validity = ref('');
	const validity2 = ref('');

	const handleTypeChange = (e) => {
		console.log('选中类型:', e);
	};

	const enterNext = () => {

		// 确认投放跳转
		uni.navigateTo({
			url: "/pages/index/couponManagement/couponManagement"
		})
	};
</script>

<style>
	.coupon-grant {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 10vh;
		background-color: #f8f8f8;
		position: relative;
	}

	.back-arrow {
		position: absolute;
		left: 20rpx;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.arrow {
		width: 20rpx;
		height: 20rpx;
		border-top: 4rpx solid black;
		border-right: 4rpx solid black;
		transform: rotate(-135deg);
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: black;
	}

	.coupon-form {
		padding: 20rpx;
		background: #fff;
		border-radius: 10rpx;
		margin: 20rpx;
		/* box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); */
		/* border-bottom: 1px solid gainsboro; */
	}

	.form-item {
		/* margin-bottom: 26rpx; */
		display: flex;
		align-items: center;
		border-bottom: 1px solid gainsboro;
		padding-bottom: 16rpx;
		padding-top: 16rpx;
	}

	.label {
		width: 220rpx;
		font-size: 32rpx;
		color: #333;
	}

	.label-type {
		margin-left: 340rpx;
		font-size: 32rpx;
		color: #333;
	}

	.input {
		flex: 1;
		height: 60rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		padding: 10rpx;
		font-size: 28rpx;
	}


	/* 按钮区域 */
	.btn-section {
		margin-top: 100rpx;
		display: flex;
		justify-content: center;

	}

	/* 按钮样式 */
	.btn-section button {
		width: 530rpx;
		height: 72rpx;
		border: 1px solid #1D6FFF;
		/* 添加蓝色边框，宽度为 1px */
		color: #1D6FFF;
		font-size: 14px;
		border-radius: 8rpx;
	}
</style>